<script setup lang="ts">
import service from "@/utils/request"
import {postsAPI} from "@/api/posts"

import {reactive} from "vue";
// 创建响应式数据
const photosData = reactive([])
const fetchData = () => {
  try {
    // service.get('/photos').then(res => {
    //   photosData.push(...res.data) // 添加数据
    // })

    // 使用封装的API接口实现获取数据
    postsAPI.getPostsList().then(res => {
      photosData.push(...res.data) // 添加数据
    })

  } catch (error) {
    console.log(error)
  }
}
</script>

<template>
  <div class="photosList">
    <h3>文章列表</h3>
    <button @click="fetchData">获取所有数据</button>
    <ul>
      <li v-for="item in photosData">
        <div>id:{{ item.id }}</div>
        <div>title:{{ item.title }}</div>
        <div>userId:{{ item.userId }}</div>
        <div>body:{{ item.body }}</div>
      </li>
    </ul>
  </div>
</template>

<style scoped>

</style>
